<template>
  <div class="sc-upload-multiple">
    <div class="sc-upload-list">
      <ul>
        <li v-for="(file, index) in fileList" :key="index">
          <div v-if="file.status!='success'" class="sc-upload-item" v-loading="true" element-loading-background="rgba(0, 0, 0, 0.5)">
            <el-image class="image" :src="file.tempImg" fit="cover" :z-index="9999"></el-image>
          </div>
          <div v-else class="sc-upload-item">
            <div class="mask">
              <span class="del" @click.stop="del(index)"><el-icon><el-icon-delete /></el-icon></span>
            </div>
            <el-image class="image" :src="file.url" fit="cover" :preview-src-list="preview" hide-on-click-modal preview-teleported>
              <template #placeholder>
                <div class="image-slot">
                  <el-icon><el-icon-more-filled /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </li>
      </ul>
    </div>
    <div class="sc-upload-uploader" @click="fileSelect && showfileSelect()" v-if="enableAdd">
      <el-upload ref="upload" class="uploader" :disabled="fileSelect" :action="action" :accept="accept" multiple :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error" :http-request="request">
        <div class="file-empty">
          <el-icon><component :is="icon" /></el-icon>
          <h4 v-if="title">{{title}}</h4>
        </div>
      </el-upload>
    </div>
    <el-dialog title="打开" v-model="fileSelectDialogVisible" :width="880" destroy-on-close append-to-body>
      <sc-file-select :max="maxSelect" multiple @submit="fileSelectSubmit">
        <template #do>
          <el-button @click="fileSelectDialogVisible=false" >取 消</el-button>
        </template>
      </sc-file-select>
    </el-dialog>
    <span style="display:none!important"><el-input v-model="value"></el-input></span>

  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import config from "@/config/upload";
const scFileSelect = defineAsyncComponent(() => import('@/components/scFileSelect'))

export default {
  props: {
    modelValue: { type: String, default: "" },
    action: { type: String, default: "" },
    api: { type: Object, default: () => {} },
    accept: { type: String, default: "*" },
    type: { type: String, default: "image" },
    maxSize: { type: Number, default: config.maxSize },
    maxSelect: {type: Number, default: 20},
    title: { type: String, default: "" },
    icon: { type: String, default: "el-icon-plus" },
    fileSelect: { type: Boolean, default: false }
  },
  components: {
    scFileSelect
  },
  data(){
    return {
      value: "",
      defaultFileList: [],
      fileList: [],
      fileSelectDialogVisible: false,
    }
  },
  watch:{
    modelValue(){
      this.$refs.upload.uploadFiles=this.modelValuetoArr
      this.fileList = this.modelValuetoArr
      this.value = this.modelValue
    },
    fileList: {
      handler(){
        if(this.isAllSuccess){
          this.$emit('update:modelValue', this.fileListtoStr);
        }
      },
      deep: true
    }
  },
  computed: {
    modelValuetoArr(){
      return this.toArr(this.modelValue)
    },
    fileListtoStr(){
      return this.toStr(this.fileList)
    },
    preview(){
      return this.fileList.map(v => v.url)
    },
    isAllSuccess(){
      var all_length = this.fileList.length;
      var success_length = 0
      this.fileList.forEach(item => {
        if(item.status == "success"){
          success_length += 1
        }
      })
      return success_length == all_length
    },
    enableAdd(){
       return this.fileList.length<this.maxSelect;
    },
  },
  mounted() {
    this.defaultFileList = this.toArr(this.modelValue);
    this.fileList = this.toArr(this.modelValue)
    this.value = this.modelValue
  },
  methods: {
    showfileSelect(){
      this.fileSelectDialogVisible = true
    },
    fileSelectSubmit(val){
      val.map((item, index) => {
        val[index] = this.$TOOL.viewImage(item)
      })
      const newval = [...this.modelValue.split(","), ...val].join(",")
      this.$emit('update:modelValue', newval);
      this.fileSelectDialogVisible = false
    },
    //默认值转换为数组
    toArr(str){
      var _arr = [];
      var arr = str.split(",");
      arr.forEach(item => {
        if(item){
          _arr.push({
            name: "F",
            status: "success",
            url: item
          })
        }
      })
      return _arr;
    },
    //数组转换为原始值
    toStr(arr){
      var _arr = [];
      arr.forEach(item => {
        _arr.push(item.url)
      })
      var str = _arr.join(",")
      return str;
    },
    before(file){
      const maxSize = file.size / 1024 / 1024 < this.maxSize;
      if (!maxSize) {
        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
        return false;
      }
    },
    change(file, fileList){
      file.tempImg = URL.createObjectURL(file.raw);
      this.fileList = fileList
    },
    success(res, file){
      var response = config.parseData(res);
      file.url = response.src
    },
    progress(){

    },
    remove(){

    },
    error(err){
      this.$notify.error({
        title: '上传文件错误',
        message: err
      })
    },
    del(index){
      this.fileList.splice(index, 1);
    },
    request(param){
       let api = config.api;
      if (this.api) {
        api = this.api;
      }
      const data = new FormData();
      data.append(this.type, param.file);
      if (this.type === "image") {
        api
          .uploadImage(data)
          .then((res) => {
            this.$emit("success", res.data);
            param.onSuccess(res);
          })
          .catch((err) => {
            param.onError(err);
          });
      } else {
        api
          .uploadFile(data)
          .then((res) => {
            this.$emit("success", res.data);
            param.onSuccess(res);
          })
          .catch((err) => {
            param.onError(err);
          });
      }
    }
  }
}
</script>

<style scoped>

.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}

.sc-upload-multiple {display: inline-block;}


.sc-upload-list {display: inline-block;}
.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;vertical-align: top;box-sizing: border-box;}

.sc-upload-item {position: relative;width: 100%;height: 100%;}
.sc-upload-item .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
.sc-upload-item .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
.sc-upload-item .mask span i {font-size: 12px;}
.sc-upload-item .mask .del {background: #F56C6C;}

.sc-upload-item:hover .mask {display: inline-block;}


.sc-upload-list .image {width: 100%;height: 100%;}

.sc-upload-list .image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;}
.sc-upload-list .image-slot i {font-size: 20px;}

.sc-upload-uploader {border: 1px dashed #d9d9d9;width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
.sc-upload-uploader:hover {border: 1px dashed #409eff;}
.sc-upload-uploader .uploader {width: 100%;height: 100%;}
.sc-upload-uploader:deep(.el-upload) {width: 100%;height: 100%;}


.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}


</style>
